<template>
  <div class="list-box">
    <div class="title">
      <span> <svg-icon :icon-class="title.icon" />
        {{ title.text }}</span>
      <el-button icon="el-icon-arrow-right" circle size="mini" @click="toStashReportBIItem" />
    </div>
    <div class="list-data">
      <div class="head flex">
        <div>名称</div>
        <div>{{ head }}</div>
      </div>
      <div class="data-box">
        <div class="flex data" v-for="(item, index) in listData" :key="index">
          <div>{{ item.commodityName }}</div>
          <div v-if="typeVal == 1">
            {{ item.inventoryNumber || 0 }} / {{ item.saleNumber || 0 }} /
            {{ item.procureNumber || 0 }}
          </div>
          <div v-else> {{ item.inventoryAmount || 0 }} / {{ item.saleAmount || 0 }} /
            {{ item.procureAmount || 0 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    listData: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "",
    },
    typeVal: {
      type: Number,
      default: "",
    },
    head: {
      type: String,
      default: "",
    }
  },

  methods: {
    toStashReportBIItem() {
      this.$emit('toStashReportBIItem')
    }
  }
};
</script>
<style lang="scss" scoped>
.list-box {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px 8px 8px 8px;
  padding: 10px 10px 0;
  font-size: 16px;
  color: #666666;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }

  .list-data {
    .head {
      padding: 6px 4px;
      background: #f0f0f0;

      margin-top: 10px;
    }

    .flex {
      display: flex;
      justify-content: space-between;
    }

    .data-box {
      overflow-y: scroll;
      height: 17vh;
    }

    .data-box::-webkit-scrollbar {
      display: none;
    }

    .data {
      color: #333333;
      margin: 5px 0;

      div:nth-child(1) {
        white-space: nowrap;
        width: 60%;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      div:nth-child(2) {
        flex-shrink: 0;
      }
    }
  }
}
</style>
